<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table {
        /* 合并表格 */
        border-collapse: collapse;
      }

      td {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #000;
        font: 20px;
      }
      .xinzeng {
        width: 700px;
        border: solid;
        margin: 0 auto;
      }
      .xinzeng p {
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .xinzeng span {
        display: inline-block;
        width: 80px;
        border: 1px solid #ccc;
        background: rgba(204, 204, 204, 0.596);
        text-align-last: justify;
        padding: 0 5px;
        border-top-left-radius: 5px;
        margin-bottom: 10px;
      }
      .xinzeng input {
        width: 500px;
        height: 20px;
      }
      .xinzeng .baocun {
        width: 100px;
        background-color: rgba(0, 0, 255, 0.724);
        color: #fff;
      }
      .xinzeng .chongzhi {
        width: 100px;
      }

      .xiugai {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        justify-content: center;
        align-items: center;
      }
      .xiugai .zhongjian {
        width: 700px;
        height: 300px;
        background: #fff;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
      }
      .xiugai span {
        display: inline-block;
        width: 80px;
        border: 1px solid #ccc;
        background: rgba(204, 204, 204, 0.596);
        text-align-last: justify;
        padding: 0 5px;
        border-top-left-radius: 5px;
        margin-bottom: 10px;
      }
      .xiugai input {
        width: 500px;
        height: 20px;
      }
      .xiugai button {
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div class="xinzeng">
      <p><b> 表单 </b>Subtext for header</p>

      <span>姓名</span
      ><input
        name="addName"
        type="text"
        autocomplete="off"
        placeholder="只能包含数字字母下划线,且不能数字开头,长度在8-16之间"
      /><br />
      <span>联系电话</span
      ><input name="addPhone" type="text" placeholder="Amount" /><br />
      <span>学历</span
      ><input name="addEdu" type="text" placeholder="Amount" /><br />
      <span>年龄</span
      ><input name="addAge" type="text" placeholder="Amount" /><br />
      <span>期望薪资</span
      ><input name="addPay" type="text" placeholder="Amount" /><br />

      <button class="baocun" name="addSave">保存</button>
      <button class="chongzhi" name="addReset">重置</button>
      <br />
      <br />

      <table>
        <thead>
          <tr>
            <td>姓名</td>
            <td>联系电话</td>
            <td>学历</td>
            <td>年龄</td>
            <td>期望薪资</td>
            <td>删除</td>
            <td>修改</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <div name="xiuGai" class="xiugai">
      <div class="zhongjian">
        <h3>请修改信息</h3>
        <br />
        <hr />
        <span>姓名</span
        ><input
          name="changeName"
          type="text"
          autocomplete="off"
          placeholder="只能包含数字字母下划线,且不能数字开头,长度在8-16之间"
        /><br />
        <span>联系电话</span
        ><input name="changePhone" type="text" placeholder="Amount" /><br />
        <span>学历</span
        ><input name="changeEdu" type="text" placeholder="Amount" /><br />
        <span>年龄</span
        ><input name="changeAge" type="text" placeholder="Amount" /><br />
        <span>期望薪资</span
        ><input name="changePay" type="text" placeholder="Amount" /><br />

        <button name="addOff">关闭</button>
        <button name="addChange">保存修改</button>
      </div>
    </div>
    <script>
      // 将 数组 存储到 localStorage中
      window.localStorage.arr = JSON.stringify([
        {
          id: 1,
          name: "张三",
          phone: 12345678911,
          edu: "本科",
          age: 18,
          pay: "$10000",
        },
        {
          id: 2,
          name: "李四",
          phone: 12345678912,
          edu: "大学辍学",
          age: 20,
          pay: "$11000",
        },
        {
          id: 3,
          name: "王五",
          phone: 12345678913,
          edu: "专科",
          age: 22,
          pay: "$12000",
        },
        {
          id: 4,
          name: "赵六",
          phone: 12345678914,
          edu: "博士",
          age: 24,
          pay: "$13000",
        },
        {
          id: 5,
          name: "刘七",
          phone: 12345678915,
          edu: "专科",
          age: 26,
          pay: "$14000",
        },
      ]);

      //   获取标签对象
      // tbody 标签对象
      var oTbody = document.querySelector("tbody");

      //   新增
      var oAddName = document.querySelector('[name="addName"]');
      var oAddPhone = document.querySelector('[name="addPhone"]');
      var oAddEdu = document.querySelector('[name="addEdu"]');
      var oAddAge = document.querySelector('[name="addAge"]');
      var oAddPay = document.querySelector('[name="addPay"]');
      // 新增button按钮
      var oAddSave = document.querySelector('[name="addSave"]');
      var oAddReset = document.querySelector('[name="addReset"]');

      //   修改
      var oXiuGai = document.querySelector('[name="xiuGai"]');
      var oChangeName = document.querySelector('[name="changeName"]');
      var oChangePhone = document.querySelector('[name="changePhone"]');
      var oChangeEdu = document.querySelector('[name="changeEdu"]');
      var oChangeAge = document.querySelector('[name="changeAge"]');
      var oChangePay = document.querySelector('[name="changePay"]');
      //   修改按钮
      var oAddOff = document.querySelector('[name="addOff"]');
      var oAddChange = document.querySelector('[name="addChange"]');

      // 定义变量,存储修改按钮点击时,获取的要修改的数据的id值
      var changeIndex = 0;

      // 调用函数 动态生成页面
      setPage();

      // // 定义 删除按钮 / 修改按钮的事件
      // 通过 事件委托语法实现
      oTbody.addEventListener("click", function (event) {
        // 判断 如果 点击的是删除按钮
        if (event.target.getAttribute("name") === "del") {
          // 获取当前 localStorage 中的数据 数组
          const arr = JSON.parse(window.localStorage.arr);

          //   弹出确认框 点击确定执行程序
          if (!window.confirm("您确定要删除吗")) {
            return;
          }
          // 当前点击的标签 存储的id 和 数组中id相同
          // 删除数组中的这个单元
          let index = Number(event.target.getAttribute("index"));

          // 循环遍历数组  如果 数组中id 和 点击删除标签存储的id相同
          // 删除这个数组单元
          arr.forEach(function (item, key) {
            if (item.id === index) {
              arr.splice(key, 1);
            }
          });

          // 将 新数组 设定给 localStorage
          window.localStorage.arr = JSON.stringify(arr);

          // 再根据新的 localStorage 动态生成页面
          setPage();

          //   判断如果点击的是修改按钮
        } else if (event.target.getAttribute("name") === "change") {
          // 获取当前localStorage 中的数据
          const arr = JSON.parse(window.localStorage.arr);

          //   显示修改页面
          oXiuGai.style.display = "flex";

          //   获取当前修改按钮的id值
          let index = Number(event.target.getAttribute("index"));
          changeIndex = index;

          // 根据 id值 设定 修改界面 显示的默认内容
          // 循环遍历数组 对象存储的id 和 修改标签存储的id相同 写入数据
          arr.forEach((item) => {
            //   item 是 存储数据对象
            if (item.id === index) {
              oChangeName.value = item.name;
              oChangePhone.value = item.phone;
              oChangeEdu.value = item.edu;
              oChangeAge.value = item.age;
              oChangePay.value = item.pay;
            }
          });
        }
      });

      // 给 一直存在的 修改 关闭 新增 添加事件
      // 关闭
      // 让 修改div 隐藏
      oAddOff.addEventListener("click", function () {
        oXiuGai.style.display = "none";
      });

      // 修改
      // 获取 修改div 中 标签的数据
      // 修改 点击标签 对应的 数组中的数据
      // 新数组 赋值 给 localStorage
      // 根据新的localStorage 再次动态生成页面
      oAddChange.addEventListener("click", function () {
        //   获取标签数据
        let name = oChangeName.value;
        let phone = oChangePhone.value;
        let edu = oChangeEdu.value;
        let age = oChangeAge.value;
        let pay = oChangePay.value;

        // 修改数组
        // 循环遍历 如果 id值 相同 修改这个数组单元的数据
        // 获取 localStorage 中 存储的数据
        const arr = JSON.parse(window.localStorage.arr);

        arr.forEach((item) => {
          console.log(item.id, changeIndex);

          if (item.id === changeIndex) {
            item.name = name;
            item.phone = phone;
            item.edu = edu;
            item.age = age;
            item.pay = pay;
          }
        });
        // 将 新数组 写入 localStorage 再次调用函数 生成新页面
        // 将 新数组 设定给 localStorage
        window.localStorage.arr = JSON.stringify(arr);

        // 再根据新的 localStorage 动态生成页面
        setPage();

        // 隐藏修改div
        oXiuGai.style.display = "none";
      });

      // 保存
      // 获取 新增div中 标签的数据
      // 生成 对象 写入 数组的末位
      // id值 是 当前数组 最后一个单元 id值+1
      // 实际项目中 应该是 数据库 自动 操作的结果
      oAddSave.addEventListener("click", function () {
        //   获取数据
        let name = oAddName.value;
        let phone = oAddPhone.value;
        let edu = oAddEdu.value;
        let age = oAddAge.value;
        let pay = oAddPay.value;

        // 获取 localStorage 中 存储的数据
        const arr = JSON.parse(window.localStorage.arr);

        // 创建一个新对象 写入 数组的末位
        arr.push({
          id: arr[arr.length - 1].id + 1,
          name,
          phone,
          edu,
          age,
          pay,
        });

        // 将 新数组 设定给 localStorage
        window.localStorage.arr = JSON.stringify(arr);

        // 再根据新的 localStorage 动态生成页面
        setPage();
      });

      oAddReset.addEventListener("click", function () {
        //获取数据
        oAddName.value = "";
        oAddPhone.value = "";
        oAddEdu.value = "";
        oAddAge.value = "";
        oAddPay.value = "";

        // 将 新数组 设定给 localStorage
        window.localStorage.arr = JSON.stringify(arr);

        // 再根据新的 localStorage 动态生成页面
        setPage();
      });

      //   定义函数 动态生成页面
      function setPage() {
        // 获取 localStorage 中 存储的数据
        const arr = JSON.parse(window.localStorage.arr);
        console.log(arr);

        // 根据数组动态生成页面
        if (arr.length === 0) {
          // 如果是 空数组 生成 对应的内容
          //   colspan="7"合并7列
          oTbody.innerHTML = '<tr><td colspan="7">没有匹配的数据了</td></tr>';
        } else {
          // 如果不是空数组 循环遍历 数组arr 动态生成页面
          let str = "";
          arr.forEach(function (item) {
            str += `
                        <tr>
                            <td>${item.name}</td>
                            <td>${item.phone}</td>
                            <td>${item.edu}</td>
                            <td>${item.age}</td>
                            <td>${item.pay}</td>
                            <td><button name="del" index="${item.id}">删除</button></td>
                            <td><button name="change" index="${item.id}">修改</button></td>
                        </tr>
                    `;
          });

          oTbody.innerHTML = str;
        }
      }
    </script>
  </body>
</html>
